<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<style>
			.box{
				width: 200px;
				height: 120px;
				border: 2px solid lightslategray;
			}
			.bg-light{
				background-color: #666666;
			}
			.bg-primary{
				background-color: cornflowerblue;
			}
			.bg-danger{
				background-color: red;
			}
			.fw-bold{
				font-weight: bold;
			}
			.fs-3{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 1. class样式
			 写法:class="xx" xxx可以是字符串、对象、数组。
			 字符串写法适用于:类名不确定，要动态获取。
			 对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
			 数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
		 2. style样式
			 :style="{fontSize: xxx}" 其中xxx是动态值。
			 :style="[a,b]"其中a、b是样式对象。

		 -->
		<div id="root">
			<!-- 绑定class属性 -->
			<div class="box" :class="bgmod" @click="handleClick">绑定一个class</div>
			
			<!-- 绑定多个class属性 -->
			<div class="box" :class="styles" @click="handleClick">绑定多个class</div>
			
			<!-- 将属性绑定至对象中 -->
			<div class="box" :class="obj" @click="handleClick">绑定多个class</div>
			
			<!-- 动态绑定style -->
			<!-- <div class="box" :style="styleObj" @click="handleClick">绑定多个class</div> -->
			<div class="box" :style="[styleObj,styleObj2]" @click="handleClick">绑定多个class</div>
			
		</div>
	</body>
	<script>
		
		new Vue({
			el:'#root',
			data(){
				return {
					bgmod:'bg-light',
					styles:['bg-danger','fw-bold','fs-3'],
					obj:{
						'bg-danger':true,
						'fw-bold':true,
						'fs-3':true
					},
					styleObj:{
						fontSize:'30px',
					},
					styleObj2:{
						backgroundColor:'orange'
					}
				}
			},
			methods:{
				handleClick(){
					const arr = ['bg-light','bg-primary','bg-danger']
					this.bgmod = arr[Math.floor(Math.random() * 3)]
				}
			}
		})
	</script>
</html>